<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.3.js"></script>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0px;
			}
			#div1{
				top: 50px;
			}
			#div2{
				top: 170px;
			}
		</style>
	</head>
	<body>
		<input type="button" value="从左到右800" id="lr800" />
		<div id="div1">
		
		</div>
		<div id="div2">
		
		</div>
		<script>
			$(function(){
				//自定义动画
				$("#lr800").click(function(){
					//让id为lr800的元素动画移动到800位置
					//animate（）参数：
					//参数1，必选的 对象 代表的是动画需要的属性
					//参数2  可选的  代表执行动画的时长
					//参数3 可选的  代表的是缓动的还是匀速的 linear swing
					//参数4 动画执行完毕后的调用函数
					$("#div1").animate({
						left:800
					},2000,"linear");
				})
				
				//让id为div2的元素动画移动到800位置
				$('#div2').animate({
					left:800,
					height:200,
					width:200,
					opacity:0.5
				},2000,"swing",function(){
					$('#div2').animate({
					left:800,
					height:200,
					width:200,
					top:100,
					opacity:0.5
				},2000)
				})
			})
		</script>
	</body>
</html>
